<template>
  <div class="popup">
    <van-search
      v-model="value"
      show-action
      :placeholder="placeholder"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>
    <HistoryHot v-if="blockShow==1" @changePlaceholder="changePlaceholder" @goSearch="goSearch" />
    <List :listArr="listArr" v-else-if="blockShow==2" @goSearch="goSearch" />
    <ProductShow v-else :goodsList="goodsList" :filterCategory="filterCategory"
    @priceResearch="priceResearch"
    @categoryResearch="categoryResearch"
     />
  </div>
</template>
 
<script>
import ProductShow from "@/components/popup/ProductShow";
import List from "@/components/popup/List";
import HistoryHot from "@/components/popup/HistoryHot";
import { KeepSearchAPI, GoodsSearchAPI } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      blockShow: 1, // 1代表历史热门，2代表列表，3代表产品展示
      placeholder: "请输入搜索关键词",
      // List组件的数组
      listArr: [],
      // 商品数组
      goodsList: [],
      // 分类的数组
      filterCategory: [],
      // 请求的页数
      page: 1,
      // 请求个数
      size: 20,
      // 价格排序
      order: "desc",
      // 按照id或price排序
      sort: "id",
      // 分类id
      categoryId: 0
    };
  },
  components: {
    ProductShow,
    List,
    HistoryHot,
  },
  methods: {
    // 从点击标签执行的搜索
    goSearch(arg) {
      this.value = arg;
      // 执行搜索
      this.goodsSearch();
    },
    // 搜索，用户敲了回车
    onSearch() {
      this.goodsSearch();
    },
    // 按照价格重新搜索
    priceResearch(arg){
      this.order = arg;
      this.sort = "price";
      this.goodsSearch();
    },
    // 分类改变，重新搜索
    categoryResearch(arg){
      this.categoryId = arg;
      this.goodsSearch();
    },
    // 封装了一个搜索事件
    goodsSearch() {
      GoodsSearchAPI({
        keyword: this.value,
        page: this.page,
        size: this.size,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then((res) => {
        if (res.errno == 0) {
          let { goodsList, filterCategory } = res.data;
          this.goodsList = goodsList;
          // 替换数组中的name和id
          this.filterCategory = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'));
          console.log(this.filterCategory)
          this.blockShow = 3;
        }
      });
    },
    // 点击了取消按钮
    onCancel() {
      // 关闭popup，跳回上一个页面
      this.$router.back();
      // 关闭弹出层的背景
      this.$store.commit("changeShowpopup", false);
    },
    // 修改placeholder
    changePlaceholder(arg) {
      this.placeholder = arg;
    },
    // 实时搜索
    onInput() {
      // 显示列表区块
      this.blockShow = 2;
      KeepSearchAPI({
        keyword: this.value,
      }).then((res) => {
        if (res.errno == 0) {
          this.listArr = res.data;
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.popup {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  z-index: 999;
  background: #efefef;
}
</style>